<template>
  <div class="discount">
    <div class="hongbao">
      <span v-for="(item,index) in btns"
            :key="index"
            :class="{'select':selectIndex==index}"
            @click="change(index)">{{item}}</span>
    </div>
    <!-- <Dis></Dis> -->
    <div class="view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import Dis from '@/components/Dis_S'
export default {
  name: 'Discount',
  // components: {
  //   Dis
  // },
  data: function () {
    return {
      btns: ['红包', '商家代金券'],
      selectIndex: 0,
    }
  },
  methods: {
    change (index) {
      this.selectIndex = index;
      // console.log(this.selectIndex);
      if (this.selectIndex == 1) {
        this.$router.push({ name: 'Dai', params: { id: index } })
      } else {
        this.$router.push({ name: 'Dis', params: { id: index } })
      }
    }
  },
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}

.hongbao {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 47px;
  background-color: #fff;
  span {
    font-size: 15px;
    color: #333;
    line-height: 30px;
    border-bottom: 2px solid white;
  }
  .select {
    color: #3190e8;
    border-bottom: 2px solid#3190e8;
  }
}
</style>